<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>那家网列表页</title>
		<!--引入局部html-->
		<link rel="stylesheet" type="text/css" href="css/list_style.min.css" />
		<script data-main="js/list.min.js" src="js/require.min.js"></script>
		<script src="js/lib/jquery-1.11.2.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/module/paging.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/lib/baiduTemplate.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/iconfont.min.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<div id="box">
			<!--头部开始-->
			<!--header_top部分开始-->
			<div id="header_top_box">
				<!--引入header_top  html-->
			</div>
			<!--header_top部分结束-->

			<!--header搜索菜单导航栏部分开始-->
			<div id="header-box">
			</div>
			<!--header搜索菜单导航栏部分结束-->
			<!--头部结束-->

			<div id="content">
				<!--统计商品数量部分开始-->
				<div id="statistics">
					<div class="breadcrumb">
						<div class="fk">
							<div class="fk1"></div>
							<div class="fk2"></div>
							<div class="fk3"></div>
							<div class="fk4"></div>
						</div>
						<span>
							<a href="#">搜索出的商品共<i>837</i>件</a>
						</span>
					</div>
				</div>
				<!--统计商品数量部分结束-->
				<!--左侧开始-->
				<div id="product_left">
					<dl>
						<dt>所有类目</dt>
						<dd title="珠宝首饰" class="product_left_xl">
							<i>
								<svg class="icon" aria-hidden="true" style="display: block;">
  									<use xlink:href="#icon-xialajiantou"></use>
								</svg>
								<svg class="icon" aria-hidden="true" style="display: none;">
  									<use xlink:href="#icon-shanglajiantou"></use>
								</svg>
							</i>
							<span>珠宝首饰</span>
						</dd>
						<ul>
							<li title="纯金k金饰品">
								<i>&gt;</i> 纯金k金饰品
							</li>
							<li title="银饰">
								<i>&gt;</i> 银饰
							</li>
							<li title="翡翠玉石">
								<i>&gt;</i> 翡翠玉石
							</li>
							<li title="水晶玛瑙">
								<i>&gt;</i> 水晶玛瑙
							</li>
							<li title="时尚饰品">
								<i>&gt;</i> 时尚饰品
							</li>
							<li title="天然木饰">
								<i>&gt;</i> 天然木饰
							</li>
						</ul>
					</dl>
				</div>
				<!--左侧结束-->
				<!--右侧开始-->
				<div id="right">
					<div class="search_condition">
						<!--每一行开始-->
						<div class="search_condition_box" style="border: none;display: block;">
							<div class="left_class">品牌</div>
							<div class="right_list">
								<!--tabs开始-->
								<!-- 内容开始 -->
								<div class="TabContent">
									<!-- 所有品牌的内容开始 -->
									<div id="myTab0_Content0">
										<ul class="brand">
											<li class="focusbg_dj focusbg">所有品牌</li>
											<li class="focusbg_dj">无品牌</li>
										</ul>
									</div>
									<!-- 所有品牌的内容结束 -->
								</div>
								<!-- 内容结束 -->
								<!--tabs结束-->
							</div>
						</div>
						<!--每一行结束-->
						<!--每一行开始-->
						<div class="search_condition_box" style="display: block;">
							<div class="left_class">款式</div>
							<div class="right_list">
								<ul class="clmorediv">
									<li class="focusbg_dj1 focusbg">不限</li>
									<li class="focusbg_dj1">A</li>
									<li class="focusbg_dj1">B</li>
									<li class="focusbg_dj1">C</li>
									<li class="focusbg_dj1">D</li>
									<li class="focusbg_dj1">E</li>
									<li class="focusbg_dj1">F</li>
									<li class="focusbg_dj1">无</li>
								</ul>
							</div>
						</div>
						<!--每一行结束-->
						<!--每一行开始-->
						<div class="search_condition_box" style="display: block;">
							<div class="left_class">首饰规格</div>
							<div class="right_list">
								<ul class="clmorediv">
									<li  class="focusbg_dj2 focusbg">不限</li>
									<li class="focusbg_dj2">链子</li>
									<li class="focusbg_dj2">吊坠</li>
									<li class="focusbg_dj2">链子+吊坠</li>
									<li class="focusbg_dj2">耳环</li>
									<li class="focusbg_dj2">手镯</li>
									<li class="focusbg_dj2">戒指</li>
								</ul>
							</div>
						</div>
						<!--每一行结束-->
						<!--每一行开始-->
						<div class="search_condition_box pullDownBox_ss" style="display: none;">
							<div class="left_class">默认</div>
							<div class="right_list">
								<ul class="clmorediv">
									<li class="focusbg_dj3 focusbg">不限</li>
									<li class="focusbg_dj3">默认</li>
								</ul>
							</div>
						</div>
						<!--每一行结束-->
						<div class="search_condition_box pullDownBox" style="display: block;">
							<span class="cursor pullDown">
                    			<i id="pullDownSm">
                    				<svg class="icon" aria-hidden="true" style="display: block;">
  										<use xlink:href="#icon-xialajiantou"></use>
									</svg>
									<svg class="icon" aria-hidden="true" style="display: none;">
  										<use xlink:href="#icon-shanglajiantou"></use>
									</svg>
                    			</i>
                			</span>
						</div>
					</div>
					<!--列表部分开始-->
					<div id="list-box">
						<!-- 列表顶部分页器部分开始 -->
						<div class="list-top">

							<ul class="fl">
								<a href="javascript:void(0);">
									<li class="screen_dj screen">
										销售数量<i class=" arrow_down"></i>
									</li>
								</a>

								<a href="javascript:void(0);">
									<li class="screen_dj">
										评价分数<i class=" arrow_down"></i>
									</li>
								</a>

								<a href="javascript:void(0);">
									<li class="screen_dj">
										上架时间<i class=" arrow_down"></i>
									</li>
								</a>

								<a href="javascript:void(0);">
									<li class="screen_dj">
										商品价格<i class=" arrow_down"></i>
									</li>
								</a>
							</ul>
							<div class="fr">
								<ul>
									<li>共<p class="mar_lr10"></p>个商品</li>
									<a href="#">
										<li><b>1</b>/30</li>
									</a>
									<li class="bl1">上一页</li>
									<li class="bl2" style="border-right:none;">下一页</li>
								</ul>
							</div>

						</div>
						<!-- 列表顶部分页器部分结束 -->
						<!--列表开始-->
						<div class="list-wrapper"></div>
						<!--列表结束-->
						<!-- 列表底部分页器部分开始 -->
						<div class="list-bottom" id="page"></div>
						<!-- 列表底部分页器部分结束 -->
					</div>
					<!--列表部分结束-->
				</div>
				<!--右侧结束-->
			</div>
			<!--footer开始-->
			<div id="footer">
			<!--引入底部html-->
			</div>
			<!--footer结束-->
		</div>
	</body>

	<script id="createList" type="text/html">
		<%for(var i= 0;i < data.length;i++){%>
		<div class="Product_box">
			<div class="big_img">
				<a href="<%=data[i].url%>" target="_blank">
					<img src=<%=data[i].imgs[0]%>>
				</a>
			</div>
			<div class="n_font">
				<a target="_blank" href="<%=data[i].url%>">
					<p><%=data[i].introduce%></p>
				</a>
			</div>
			<div class="qqjt">
				<span class="sousuo">
					<a href="#" target="_blank" title="苗人匠心"><%=data[i].title%></a>
				</span>
				<span class="fr">
                    <a target="_blank" href="#">
                         <img border="0" src=<%=data[i].contact[0]%> alt="点击这里给我发消息" title="点击这里给我发消息">
                    </a>
                </span>
			</div>
			<div class="jiaqian">
				<strong class="font_fe">￥<%=data[i].price%></strong>
				<div class="baoyou"></div>
			</div>
			<div class="salesVolume">
				<span>&nbsp;已有<i><%=data[i].number%></i>人购买</span>
			</div>

			<!--评论里的星星级别可以从sa5到sa0-->
			<div class="pingfen">
				<span id="skuScope0">
					<i class="star-off"></i>
					<i class="star-off"></i>
					<i class="star-off"></i>
					<i class="star-off"></i>
					<i class="star-off"></i>
				</span>
				<a class="font_12 font_7a fr mar_r5" href="#">加入购物车</a>
			</div>

		</div>
		<%}%>
	</script>

	<script>
		$(function() {
			$.getJSON('list.json', function(result) {
				initPaging(result)
			})

			function initPaging(result) {
				//分页器
				$('#page').paging({
					initPageNo: 1, // 初始页码
					totalPages: Math.ceil(result.data.length / 28), //总页数
					totalCount: result.data.length, // 条目总数
					slideSpeed: 600, // 缓动速度。单位毫秒
					jump: true, //是否支持跳转
					callback: function(page) { // 回调函数
						var obj = {
							data: []
						}
						for(var i = 28 * (page - 1); i < 28 * page; i++) {
							if(result.data[i]) {
								obj.data.push(result.data[i]);
							}

						}
						var html = baidu.template('createList', obj);
						$('.list-wrapper').html(html);
					}
				})
			}

		})
	</script>

</html>